import React, { Component } from "react";
import { TreeSelect, DataSet, Form } from "choerodon-ui/pro";
import { FieldProps } from "choerodon-ui/pro/lib/data-set/Field";
import { DataSetSelection } from "choerodon-ui/pro/lib/data-set/enum";
import { Button } from "choerodon-ui/pro";

export default class MultipleTree extends Component {
  optionsDs = new DataSet({
    selection: DataSetSelection.multiple,
    dataKey: "data",
    autoQuery: true,
    idField: "id",
    parentField: "parentId",
    // fields: [
    //   {
    //     name: "id",
    //     type: "string",
    //   },
    //   {
    //     name: "parentId",
    //     type: "string",
    //   },
    // ] as FieldProps[],
    transport: {
      read() {
        return {
          method: "GET",
          url: `https://www.fastmock.site/mock/79366917e4ba9130420b04996b8c3a73/mock/api/tree`,
        };
      },
    },
  });
  ds = new DataSet({
    autoQuery: true,
    fields: [
      /**
       * 设置多值的树形组件有几个需要注意的点
       * 1.multiple: true,这样可以让选项形成一个个的长方形，但是bind的字段需要设置为','这样可以自动拆装字符串数组
       * 2.type:不设置为object,不设置type可以让树形组件在回显数据时与选项形成关联，避免了同一条数据可以多次添加,但是提交会有问题，等待工单回复
       */
      {
        name: "businessUnit",
        label: "业务单元",
        // 是否为值数组。 当为字符串时，作为数据分隔符，查询时会将字符串分割成数组，提交时会将数组拼接成字符串
        multiple: true,
        type: "object",
        textField: "name",
        valueField: "id",
        ignore: "always",
        options: this.optionsDs,
      },
      {
        // 是否为值数组。 当为字符串时，作为数据分隔符，查询时会将字符串分割成数组，提交时会将数组拼接成字符串
        multiple: ",",
        name: "businessUnitStrGid",
        bind: "businessUnit.id",
        type: "number",
      },

      {
        // 是否为值数组。 当为字符串时，作为数据分隔符，查询时会将字符串分割成数组，提交时会将数组拼接成字符串
        multiple: ",",
        name: "businessUnitStrName",
        bind: "businessUnit.name",
      },
    ] as FieldProps[],
    transport: {
      read: {
        url:
          "https://www.fastmock.site/mock/79366917e4ba9130420b04996b8c3a73/mock/api/multipletree",
      },
    },
  });
  /**
   * @description: 查看表单的内容
   * @param {*}
   * @return {*}
   */

  submit = () => {
    console.log("form", this.ds.toData());
  };
  render() {
    return (
      <>
        {/* @ts-ignore */}
        <Form dataSet={this.ds}>
          {/* @ts-ignore */}
          <TreeSelect name='businessUnit' />
        </Form>
        <Button onClick={this.submit}>控制台查看表单内容</Button>
      </>
    );
  }
}
